import React,{useState,useEffect,useLayoutEffect,useCallback} from 'react'
import { useFocusEffect } from '@react-navigation/native'
import { StyleSheet,
         View,Text,Image,
         TouchableOpacity,ScrollView,
         ImageBackground,TextInput} from 'react-native'
import '../../global'  
const Mycollection = ({route,navigation}) => {
    const [collectionnum,setCollectionnum]=useState(collection_ischange)
    const [num,setNum]=useState(0)
    const [user,setUser]=useState(user_info)
    const[isconnel,setIsconnel]=useState(0)
    const [collections,setCollections]=useState([{
        "topic": {
            "id": 2,
            "topic_user_id": 6,
            "topic_user_name": "笑哈哈",
            "topic_user_avatar": "http://82.157.94.91:8000/defaultAvatar.jpg",
            "topic_type": "english",
            "topic_title": "怎么背单词才高效呢?",
            "topic_content": "如题，单词书特别厚，怎么才能高效的记忆单词嘞",
            "topic_img": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.5mcc.com.cn%2F5mcc_com_cn%2Fallimg%2F190129%2F153G62216-1.jpg&refer=http%3A%2F%2Fimg.5mcc.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653382342&t=7af7ae5f0982744a6df7178ee381ec6c",
            "topic_number_of_likes": 86,
            "createdAt": "2022-04-24T08:52:40.000Z",
            "updatedAt": "2022-04-24T08:52:40.000Z"
        },
        "comment_mes": [
        ]
    }
    ])
    
    useLayoutEffect(()=>{
        navigation.setOptions({

         headerStyle: {
             backgroundColor: 'dodgerblue',
         },
         headerTintColor: 'black',
         headerTitleAlign: 'center',
        })
        },[])
    useFocusEffect(React.useCallback(()=>{
        fetch('http://82.157.94.91:8000/users/get_user_collects',{
            method:'post',
            headers: {
               'Content-Type': 'application/json',
               'Authorization':"Bearer "+token
            },
            body:JSON.stringify({
                user_id:user.id,
            })
          })
          .then(res=>res.json())
          .then(res=>{
             setCollections(res.result)
             setNum(res.result.length)
          })
    },[]))
   const concel=(id)=>{
     console.log(id)
    fetch('http://82.157.94.91:8000/users/delete_collect_topic',{
      method:'post',
      headers: {
         'Content-Type': 'application/json',
         'Authorization':"Bearer "+token
      },
      body:JSON.stringify({
          user_id:user.id,
          collect_topic_id:id
      })
    })

    .then(res=>res.json())
    .then(res=>{
     setIsconnel(concel++)
    })
    fetch('http://82.157.94.91:8000/users/get_user_collects',{
      method:'post',
      headers: {
         'Content-Type': 'application/json',
         'Authorization':"Bearer "+token
      },
      body:JSON.stringify({
          user_id:user.id,
      })
    })
    .then(res=>res.json())
    .then(res=>{
       setCollections(res.result)
       setNum(res.result.length)
    })
       
   }
  return(
      <View>
           <Text style={styles.num}>{num}个内容</Text>
           {num==0?
            <View>
                 <Image 
                            style={styles.none}
                            source={require('../../images/col.png')}
                         />
                 <Text style={styles.point}>
                     还没有收藏任何内容哦
                 </Text>
            </View>:
           
           <ScrollView style={styles.collectcontent}>
           {collections.map(item=>{
                
                return<View>
                <View
                style={{ 
                  display:'flex',
                 flexDirection:'row',
                justifyContent:"space-around",}}
                >
                <TouchableOpacity onPress={()=>{navigation.navigate('Deatil',{txt:'详情',detailObj:item.topic});setCollectionnum(collection_ischange)}}>
                <View style={styles.user}>
                         <Text style={styles.title}>{item.topic.topic_title}</Text>
                         <View style={styles.userstyle}>
                         <Image 
                            style={styles.head}
                            source={{
                                uri: item.topic.topic_user_avatar,
                              }}
                         />
                         
                          <Text>{item.topic._user_name}</Text>
                         </View>
                          
                           <Text style={styles.synopsis}>{item.topic.topic_content}</Text>
                           <View>
                           <Text style={styles.detail}>{item.topic.topic_number_of_likes}点赞</Text>
                           </View>

                </View>
                </TouchableOpacity>
                <TouchableOpacity onPress={()=>{concel(item.topic.id)}}>
                              <Text style={styles.deltopic}>取消收藏</Text>
                 </TouchableOpacity>
                </View>
                <Text style={{width:pxtodpW(750),height:pxtodpH(5),backgroundColor:'#ccc'}}></Text>
            </View>
            })}
           </ScrollView>}
      </View>
  )
}

const styles = StyleSheet.create({
  none:{
    width:pxtodpW(500),
    height:pxtodpH(500),
    marginLeft:pxtodpW(100),
    marginTop:pxtodpH(200)
  },
  point:{
  textAlign:'center',
  fontSize:15,
  color:'grey'
  },
  num:{
    width:pxtodpW(750),
    height:pxtodpH(40),
    color:'grey',
    marginLeft:pxtodpW(10)
  },
  collectcontent:{
   
    width:pxtodpW(750),
    height:pxtodpH(1000),
  },
  user:{
    width:pxtodpW(550),
    height:pxtodpH(230),
    marginTop:pxtodpH(10),
    marginLeft:pxtodpW(30),
 
},
title:{
    fontSize:20
},
head:{
   width:pxtodpW(80),
   height:pxtodpH(75),
   marginRight:pxtodpW(10),
   borderRadius:15
},
detail:{
  color:'#bbb',
  marginLeft:pxtodpW(5),
},
synopsis:{
  marginTop:pxtodpH(-10),
  marginLeft:pxtodpW(5),
  fontSize:14
},
deltopic:{
  width:pxtodpW(100),
  height:pxtodpH(50),
  backgroundColor:'dodgerblue',
  textAlign:"center",
  lineHeight:pxtodpH(50),
  borderRadius:10,
  marginTop:pxtodpH(180)
},
   });
   
export default Mycollection
